<template>
	<view class="m-position">
		<view class="item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
			<view class="title space-between">
				<view class="left">
					<!-- <text class="title-parttime" v-if="item.ifParttime==1">兼职</text> -->
            <view class="title-item">
              <view class="title-name">
              太原市公司招聘一线普工（无需 经验)
              <text class="tag blue">代招</text>
               <text class="tag green">派遣</text>
               <text class="tag origen">急聘</text>
               </view>
            </view>
					<!-- <text class="title-share" v-if="item.positionType==3">共享</text> -->
				</view>
				<text class="right">6-8k </text>
			</view>
			<view class="company">
       太原挖掘机制造有限公司  不需要  融资 300-1000人 
				<!-- <view class="left">
					{{ item.companyName }}
					<view class="height-line"></view>
					{{ item.companyStaffSize }}
					<view class="height-line"></view>
					{{ item.companyNature }}
				</view>
				<view class="right">
					<text class="address">{{formatDistance(item.distance)}}</text>
				</view> -->
			</view>
			<view class="desc">
				<text class="blue">企业认证</text>
        <text>经验不限</text>
        <text class="blue">月结工资</text>
        <text class="blue">五险一金</text>
			</view>
      <view class="descr">
          岗位职责：普工/操作工，无需工作经验，挖掘机...
      </view>
			<!-- <view class="share" v-if="item.positionType == 3">
				空闲{{ item.shareNumber }}人
				<view class="height-line"></view>
				{{ formatCreateTime(item.startDate) }} - {{ formatCreateTime(item.endDate) }}
				<view class="height-line"></view>
				最多{{ item.workDays }}天
			</view> -->
			<view class="user">
				<view class="left">
					<!-- <image :src="item.memberAvatar"></image> -->
          <image :src="$mConfig.imageUrl + '/image/per1.png'" ></image>
					<text class="name">张潇潇</text>
					<text class="post">运营负责人</text>
         
				</view>
        <view class="right">
           <text class="area">太原市</text>
					<text class="address">小店区</text>
          <text class="address">范岗镇</text>
        </view>
			
			</view>
		</view>
	</view>
</template>

<script>
import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
import { formatDate } from '@/common/date';
export default {
	name: 'yzb-position',
	props: {
		positions: Array
	},
	components: {
		mEmptyData
	},
	data() {
		return {
      no_order_1: this.$mAssetsPath.no_order_1,
      list:[
        {id:38},
        {id:42},

      ]
		};
	},

	methods: {
		onClick(item) {
			this.$emit('click', item);
		},

		formatCreateTime(time) {
			if (time == null || time === '') {
				return null;
			}
			let str = time.replace(/-/g,'/');
			let date = new Date(str);
			return formatDate(date, 'MM月dd日');
		},
		
		formatDistance(distance){
			if(distance){
				let a=parseFloat(distance);
				if(a>0){
					return distance.toFixed(2)+"km"
				}else{
					return a * 1000 +"m";
				}
			}
			return '0km';
		},
	}
};
</script>

<style lang="scss">
.m-position {
	.item {
		background-color: $bgcolor_white;
		padding: 38rpx 38rpx 26rpx;
		margin-bottom: 20rpx;
    // border-bottom: 10upx solid $border-color-light;
    border-radius: 10rpx;
	}
}
.space-between {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.title {
 
	.left {
		
  }
  .title-item{
    display: flex;
  }
	.title-name{
    font-weight: 600;
     font-size: $uni-font-size-lg !important;
     color: #111;
     .tag{
       border:1px solid #1E73FF;
       color: #1E73FF;
       font-size: 20rpx;
       width: 58rpx;
       text-align: center;
       line-height: 30rpx;
       border-radius: 6rpx;
       display: inline-block;
       margin-left: 10rpx;
     }
     .green{
       color: #159752;
       border-color: #159752;
     }
     .origen{
       color: #FF2A00;
       border-color: #FF2A00;
     }
	}
	
	.title-parttime{
		color: $font-color-orange;
		border: 1upx solid $font-color-orange;
		font-size: $uni-font-size-sm;
		margin-right: 15upx;
		padding: 5upx 10upx;
		border-radius: 6upx;
	}
	
	.title-share {
		color: $main-color;
		border: 1upx solid $main-color;
		border-radius: 20upx 0upx;
		// height: 38upx;
		// width: 130upx;
		font-size: $uni-font-size-sm;
		margin-left: 20upx;
		padding: 0upx 10upx;
	}

	.right {
		color: $main-color;
		font-weight: 600;
    font-size: 36rpx;
    width: 30%;
    text-align: right;
	}
}

.company {
	color: #222;
  font-size: 28rpx;
  padding: 38rpx 0 26rpx;
	.height-line {
		height: 20upx;
		width: 4upx;
		background-color: $font-color-ccc;
		margin: 0 15upx;
	}
	.left {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 15upx;
		text{
			margin-right:10upx;
			font-size: $uni-font-size-sm;
		}
	}
	.right{
		text{
			font-size: $uni-font-size-sm;
		}
	}
	.yzb-yirenzheng1{
		color: $uni-color-success;
	}
}
.descr{
  	color: #222;
  font-size: 28rpx;
  padding: 22rpx 0 29rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share {
	color: $font-color-999;
	// margin-top: 5upx;
	font-size: $uni-font-size-base;
	display: flex;
	flex-direction: row;
	align-items: center;
	.height-line {
		height: 20upx;
		width: 4upx;
		background-color: $font-color-ccc;
		margin: 0 15upx;
	}
}

.desc {
	// margin: 10upx 0;
	margin-top: 5upx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	flex-direction: row;
	justify-content: flex-start;
	text {
		font-size: 24rpx;
		padding: 10rpx 14rpx;
		margin-right: 15upx;
		margin-bottom: 8upx;
		background-color:#F3F5FA;
    color: $font-color-666;
    border-radius: 10rpx;
  }
  .blue{
    color: #4B9BFF;
  }
	.position-type2 {
		border: $uni-color-primary 1upx solid;
		background-color: #fff;
		color: $uni-color-primary;
	}
	.position-type3 {
		border: $font-color-orange 1upx solid;
		background-color: #fff;
		color: $font-color-orange;
	}
}

.user {
	display: flex;
	flex-direction: row;
	align-items: center;
	 justify-content: space-between;
	image {
		width: 80upx;
		height: 80upx;
		border-radius: 30upx;
	}
	.left {
		display: flex;
		flex-direction: row;
    align-items: center;
    justify-content: space-between;
		font-size: 26rpx !important;
		color:#999;
		.name {
      margin: 0 20upx;
      color: #333333;
		}
		.post {
			// color: $font-color-666;
		}
	}
	.right {
		display: flex;
		flex-direction: row;
    align-items: center;
    	color:#999;
		.area {
			margin-right: 15upx;
		}
	}
}
</style>
